<template>
	<view>
		<navBarView></navBarView>
		<navBar navBarTitle="SSAT个性化1对1课程" bg="#f0f2f5" @rightIconChange="openPopup"></navBar>
		<view class="content-info">
			<image :src="detailObj.image" class="img-s"></image>
			<view class="info-option">
				<view class="hint-txt">
					{{ detailObj.name }}
				</view>

				<view class="hint-price-info">
					<span>咨询课程老师</span>
					<view class="txt">原价:{{ detailObj.price }}元/小时</view>
					<!-- <view class="tag-right">SSAT</view> -->
				</view>
			</view>
		</view>

		<view class="bottom-fixed">
			<view class="left-icon" @click="openPopup">
				<image src="@/static/index/kefu.png" class="icon"></image>
				<view class="txt">咨询</view>
			</view>
			<view class="right-option">
				<view class="btn-txt" @click="openPopup">立即预约</view>
			</view>
		</view>

		<sumitPopup ref="submitPopupRef" :classifyArr="courseLst" @submitPopupChange="submitPopupChange"></sumitPopup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			campusArr: [
				{
					name: '校区一'
				},
				{
					name: '校区二'
				},
				{
					name: '校区三'
				}
			],
			campusIndex: 0,
			campusName: '',
			classifyArr: [
				{
					name: '课程一'
				},
				{
					name: '课程二'
				},
				{
					name: '课程三'
				}
			],
			classifyIndex: 0,
			classifyName: '',
			detailObj: {}
		};
	},
	onLoad() {
		this.detailObj = uni.getStorageSync('coureItem');
	},
	onShow() {
		this.courseLst = uni.getStorageSync('courseLst');
	},
	methods: {
		openPopup() {
			this.$refs.submitPopupRef.openPopup();
		},
		submitPopupChange(data) {
			console.log('data========',data)
			uni.showLoading({
				title: '提交中'
			});
			this.$http('common.addSubmit', {
				...data,
				adminId: uni.getStorageSync('adminId')
			}).then((res) => {
				if (res.code == 200) {
					this.$tools.showMsg('提交成功');
					uni.hideLoading();
					this.$refs.submitPopupRef.clearParam();
					this.$refs.submitPopupRef.closePopup();
					console.log('res======>', res);
				}
			});
		}
	}
};
</script>
<style>
page {
	background: #f4f6f8;
}
</style>

<style lang="scss">
.content-info {
	margin-top: 16rpx;

	.img-s {
		background: skyblue;
		width: 750rpx;
		height: 468rpx;
	}

	.info-option {
		margin: 32rpx;

		.hint-txt {
			font-weight: 500;
			font-size: 36rpx;
			color: #202030;
			line-height: 1.5em;
		}

		.hint-price-info {
			margin-top: 42rpx;
			display: flex;
			align-items: center;

			span {
				font-weight: 500;
				font-size: 32rpx;
				color: #fa5858;
			}

			.txt {
				margin-left: 20rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #b4b4b4;
			}

			.tag-right {
				flex: auto;
				text-align: right;
				font-weight: 400;
				font-size: 20rpx;
				color: #b4b4b4;
			}
		}
	}
}

.bottom-fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 444rpx;
	height: 98rpx;
	background: #ffffff;
	box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
	display: flex;
	align-items: center;

	.left-icon {
		flex: none;
		margin-left: 44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.icon {
			width: 28rpx;
			height: 30rpx;
		}

		.txt {
			margin-top: 6rpx;
			font-weight: 500;
			font-size: 16rpx;
			color: #666666;
		}
	}

	.right-option {
		margin-right: 32rpx;
		flex: auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.btn-txt {
			width: 494rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background: #209e9a;
			border-radius: 56rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
		}
	}
}

.appointment-block {
	width: 654rpx;
	height: 920rpx;
	background: #ffffff;
	border-radius: 24rpx;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.hint-img {
		position: absolute;
		left: 34rpx;
		right: 34rpx;
		top: -90rpx;
		z-index: 999rpx;
		height: 175rpx;
		width: 590rpx;
	}

	.item-option {
		width: 542rpx;
		margin-top: 32rpx;

		.hint-txt {
			font-weight: 500;
			font-size: 28rpx;
			color: #bdbdbd;
		}

		.input-opiton {
			height: 88rpx;
			background: #f4f6f8;
			border-radius: 12rpx;
			flex: auto;
			margin-top: 16rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			align-items: center;

			.input-class {
				flex: auto;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #2f2525;
			}

			.pl {
				font-size: 28rpx;
			}

			.right-icon {
				flex: none;
				width: 24rpx;
				height: 12rpx;
			}
		}
	}

	.btn-submit {
		margin-top: 48rpx;
		width: 312rpx;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		background: #209e9a;
		border-radius: 56rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
	}
}
</style>
